<template>
  <div>
    <canvas id="canvas" width="100%" height="100%"></canvas>
    <div class="home" id="home">
      <div class="headerTitle">
        <div class="cenShow">
          <img class="leftImg" src="../../assets/header_left.png">
          <p>大数据智能平台</p>
          <img class="rightImg" src="../../assets/header_right.png">
        </div>
        <div class="topBor">
          <audio controls='controls' hidden id="audio" ref='audio'>
            <!--  <source src="../../../static/mp3/8211.mp3" type="audio/mp3" /> -->
          </audio>
        </div>
      </div>

      <div class="contentMain">
        <div class="leftBox">
          <div class="leftSame">
            <div class="topTitle">
              <span class="block1"></span><span class="block2"></span><span class="block3"></span>
              <span class="title">控制器</span>
              <span class="block3"></span><span class="block2"></span><span class="block1"></span>
            </div>
            <div class="chartBg">
              <div class="chartName">联网占比图</div>
              <!-- 联网占比图 canvas -->
              <div id="myChartOne" class="myChart" :style="{width: '50%', height: '70%'}"></div>
              <div class="blockColumn totalBlock">
                <div class="flex_block mt_1">
                  <img class="blockImg1" src="../../assets/icon_controller.png">
                  <div class="blockColumn">
                    <span class="blockDesc col_1EE9B6">总控制器数</span>
                    <span class="blockValue">{{controllerData.equipment_count||0}}</span>
                  </div>
                </div>
                <div class="flex_block">
                  <img class="blockImg1" src="../../assets/icon_core.png">
                  <div class="blockColumn">
                    <span class="blockDesc col_57BBC9">总炉具数</span>
                    <span class="blockValue">{{controllerData.stove_core_count||0}}</span>
                  </div>
                </div>
              </div>
              <div class="flex_around">
                <div class="flex_block">
                  <img class="blockImg2" src="../../assets/icon_online.png">
                  <div class="blockColumn">
                    <span class="blockDesc col_FF9C1F">在线</span>
                    <span class="blockValue">{{controllerData.on_line||0}}</span>
                  </div>
                </div>
                <div class="flex_block">
                  <img class="blockImg2" src="../../assets/icon_outline.png">
                  <div class="blockColumn">
                    <span class="blockDesc col_FD5F5F">离线</span>
                    <span class="blockValue">{{controllerData.off_line||0}}</span>
                  </div>
                </div>
                <div class="flex_block">
                  <img class="blockImg2" src="../../assets/icon_fault.png">
                  <div class="blockColumn">
                    <span class="blockDesc col_B1CE10">故障率</span>
                    <span class="blockValue">{{controllerData.failure_rate||0}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="leftSame" style="height: 50%">
            <div class="topTitle">
              <span class="block1"></span><span class="block2"></span><span class="block3"></span>
              <span class="title">地域排行</span>
              <span class="block3"></span><span class="block2"></span><span class="block1"></span>
            </div>
            <div class="chartBg">
              <div class="chartName">炉具排名</div>
              <!-- 炉具排名 canvas -->
              <div id="myChartTwo" class="myChart" :style="{width: '98%', height: '98%'}"></div>
            </div>
          </div>
        </div>
        <div class="centerBox">
          <div class="atlas">
            <div class="todayTotal">
              <div class="blockColumn mr_3">
                <div class="totalDesc">今日新装炉具数</div>
                <div class="flex_block">
                  <span class="todayNum col_FF9C1F">{{totalData.today_stove_core_count||0}}</span>
                  <div class="blockColumn">
                    <span class="todayPercentage" :class="totalData.stove_core_proportion>=0?'col_1EE9B6':'col_FD5F5F'">{{Math.abs(totalData.stove_core_proportion)||0}}%</span>
                    <div class="updown">昨天<img :src="totalData.stove_core_proportion>=0?require('../../assets/icon_up.png'):require('../../assets/icon_down.png')"></div>
                  </div>
                </div>
              </div>
              <div class="blockColumn">
                <div class="totalDesc">今日新装控制器数</div>
                <div class="flex_block">
                  <span class="todayNum col_FF9C1F">{{totalData.today_equipment_count||0}}</span>
                  <div class="blockColumn">
                    <span class="todayPercentage" :class="totalData.equipment_proportion>=0?'col_1EE9B6':'col_FD5F5F'">{{Math.abs(totalData.equipment_proportion)||0}}%</span>
                    <div class="updown">昨天<img :src="totalData.equipment_proportion>=0?require('../../assets/icon_up.png'):require('../../assets/icon_down.png')"></div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 中间地图 canvas -->
            <div id="myChartFour" :style="{width: '100%', height: '100%'}"></div>
          </div>
        </div>
        <div class="rightBox">
          <div class="rightSameOne">
            <div class="topTitle">
              <span class="block1"></span><span class="block2"></span><span class="block3"></span>
              <span class="title">装机趋势图</span>
              <span class="block3"></span><span class="block2"></span><span class="block1"></span>
            </div>
            <div class="chartBg">
              <!-- 装机趋势图 canvas -->
              <div id="myChartThree" class="myChart" :style="{width: '98%', height: '98%',}"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import china from '../../../static/china.js';
let echarts = require('echarts/lib/echarts');
var points = [
  {"value": [118.8062, 31.9208],"itemStyle":{"color":"#4ab2e5"}}
  , {"value": [127.9688, 45.368],"itemStyle":{"color":"#4fb6d2"}}
  , {"value": [110.3467, 41.4899],"itemStyle":{"color":"#52b9c7"}}
  , {"value": [125.8154, 44.2584],"itemStyle":{"color":"#5abead"}}
  , {"value": [116.4551, 40.2539],"itemStyle":{"color":"#f34e2b"}}
  , {"value": [123.1238, 42.1216],"itemStyle":{"color":"#f56321"}}
  , {"value": [114.4995, 38.1006],"itemStyle":{"color":"#f56f1c"}}
  , {"value": [117.4219, 39.4189],"itemStyle":{"color":"#f58414"}}
  , {"value": [112.3352, 37.9413],"itemStyle":{"color":"#f58f0e"}}
  , {"value": [109.1162, 34.2004],"itemStyle":{"color":"#f5a305"}}
  , {"value": [103.5901, 36.3043],"itemStyle":{"color":"#e7ab0b"}}
  , {"value": [106.3586, 38.1775],"itemStyle":{"color":"#dfae10"}}
  , {"value": [101.4038, 36.8207],"itemStyle":{"color":"#d5b314"}}
  , {"value": [103.9526, 30.7617],"itemStyle":{"color":"#c1bb1f"}}
  , {"value": [108.384366, 30.439702],"itemStyle":{"color":"#b9be23"}}
  , {"value": [113.0823, 28.2568],"itemStyle":{"color":"#a6c62c"}}
  , {"value": [102.9199, 25.46639],"itemStyle":{"color":"#96cc34"}}
  , {"value": [119.4543, 25.9222]}
];
var lines = [
  {"coords": [[103.9526, 30.7617],[118.8062, 31.9208]],"lineStyle":{"color":"#4ab2e5"}}
  , {"coords": [[103.9526, 30.7617],[127.9688, 45.368]],"lineStyle":{"color":"#4fb6d2"}}
  , {"coords": [[103.9526, 30.7617],[110.3467, 41.4899]],"lineStyle":{"color":"#52b9c7"}}
  , {"coords": [[103.9526, 30.7617],[125.8154, 44.2584]],"lineStyle":{"color":"#5abead"}}
  , {"coords": [[103.9526, 30.7617],[116.4551, 40.2539]],"lineStyle":{"color":"#f34e2b"}}
  , {"coords": [[103.9526, 30.7617],[123.1238, 42.1216]],"lineStyle":{"color":"#f56321"}}
  , {"coords": [[103.9526, 30.7617],[114.4995, 38.1006]],"lineStyle":{"color":"#f56f1c"}}
  , {"coords": [[103.9526, 30.7617],[117.4219, 39.4189]],"lineStyle":{"color":"#f58414"}}
  , {"coords": [[103.9526, 30.7617],[112.3352, 37.9413]],"lineStyle":{"color":"#f58f0e"}}
  , {"coords": [[103.9526, 30.7617],[109.1162, 34.2004]],"lineStyle":{"color":"#f5a305"}}
  , {"coords": [[103.9526, 30.7617],[103.5901, 36.3043]],"lineStyle":{"color":"#e7ab0b"}}
  , {"coords": [[103.9526, 30.7617],[106.3586, 38.1775]],"lineStyle":{"color":"#dfae10"}}
  , {"coords": [[103.9526, 30.7617],[101.4038, 36.8207]],"lineStyle":{"color":"#d5b314"}}
  , {"coords": [[103.9526, 30.7617],[119.4543, 25.9222]],"lineStyle":{"color":"#c1bb1f"}}
  , {"coords": [[103.9526, 30.7617],[108.384366, 30.439702]],"lineStyle":{"color":"#b9be23"}}
  , {"coords": [[103.9526, 30.7617],[113.0823, 28.2568]],"lineStyle":{"color":"#a6c62c"}}
  , {"coords": [[103.9526, 30.7617],[102.9199, 25.46639]],"lineStyle":{"color":"#96cc34"}}
];
export default {
  name: 'HelloWorld',
  data() {
    return {
      chartChinaFun:null,
      chartPieFun:null,
      chartBarDistribution:null,
      chartLineFlter:null,
      resizeTimer: null,
      audio_url: '../../../static/mp3/1.mp3', //['../../../static/mp3/1.mp3', '../../../static/mp3/2.mp3', '../../../static/mp3/3.mp3'],//提示音 mp3
      websock: null, //websock

      waterconsumption: 8888,
      controllerData: '',//控制器数据
      totalData: '',//今日统计
      screenWidth: document.body.clientWidth,
      getOptionChina: {
        geo: {
          map: 'china',
          aspectScale: 0.75, //长宽比
          zoom: 1.1,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: '#09132c' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#274d68'  // 100% 处的颜色
                }],
                globalCoord: true // 缺省为 false
              },
              shadowColor:'rgb(58,115,192)',
              shadowOffsetX: 10,
              shadowOffsetY: 11
            },
            emphasis: {
              areaColor: '#2AB8FF',
              borderWidth: 0,
              color: 'green',
              label: {
                show: false
              }
            }
          },
          regions: [{
            name: '南海诸岛',
            itemStyle: {
              areaColor: 'rgba(0, 10, 52, 1)',
              borderColor: 'rgba(0, 10, 52, 1)',
              normal: {
                opacity: 0,
                label: {
                  show: false,
                  color: "#009cc9",
                }
              }
            },
          }],
        },
        series: [ {
          type: 'map',
          roam: false,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#1DE9B6'
              }
            },
            emphasis: {
              textStyle: {
                color: 'rgb(183,185,14)'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgb(147, 235, 248)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: '#09132c' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#274d68'  // 100% 处的颜色
                }],
                globalCoord: true // 缺省为 false
              },
            },
            emphasis: {
              areaColor: 'rgb(46,229,206)',
              borderWidth: 0.1
            }
          },
          zoom: 1.1,
          map: 'china' //使用
        },{
          type: 'effectScatter',
          coordinateSystem: 'geo',
          showEffectOn: 'render',
          zlevel:1,
          rippleEffect: {
            period: 15,
            scale: 4,
            brushType: 'fill'
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              offset: [15, 0],
              color: '#1DE9B6',
              show: true
            },
          },
          itemStyle: {
            normal: {
              color:'#1DE9B6',
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          symbolSize: 12,
          data: points
        }, //地图线的动画效果
          {
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', //箭头图标
              symbolSize: 7, //图标大小
            },
            lineStyle: {
              normal: {
                color:'#1DE9B6',
                width: 1, //线条宽度
                opacity: 0.1, //尾迹线条透明度
                curveness: .3 //尾迹线条曲直度
              }
            },
            data: lines
          }
        ]
      },
      getOptionPie: {
        color: ['#FF9C1F', '#FD5F5F'],
        series: [{
          name: '联网状态',
          type: 'pie',
          radius: ['50%', '80%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'inside',
            formatter: (params) => {
              return `${params.percent}%`
            }
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '16',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {value: 75, name: '离线'},
            {value: 300, name: '在线'},
          ]
        }]
      },
      getOptionBarDistribution: {
        grid: {
          left: '3%',
          right: '3%',
          top: '3%',
          bottom: '2%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        //X轴
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          show: false,
          // max: function (value) {
          //   return value.max + value.max/3;
          // },
          //x轴坐标颜色
          axisLine: {
            lineStyle: {
              color: '#314A70',
              padding: 10,
              type: 'solid',
            }
          },
          //刻度上字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          //刻度样式
          axisTick: {
            alignWithLabel: true,
            length: 5,
            color: '#314A70',
            lineStyle: {
              color: '#314A70'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['重庆', '四川', '河北', '河南', '内蒙', '北京', '陕西', '山西', '山东'],
          splitLine: { // 分隔线
            show: false, // 默认显示，属性show控制显示与否
          },
          scale: true,
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#314A70'
            }
          },
          axisLabel: {
            show: true,
            margin: 10,
            verticalAlign: 'middle',
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            alignWithLabel: true, //刻度线和标签对齐
            length: 5,
            color: '#314A70',
            lineStyle: {
              color: '#314A70'
            },

          }
        },
        series: [{
          data: [3, 4, 7, 9, 10, 13, 15, 17, 100],
          type: 'bar',
          symbol: 'diamond',
          barWidth: 10,
          symbolSize: 4, //标记的大小
          color: function(params) {　 //首先定义一个数组
            var colorList = ['#B1CE10', '#B1CE10', '#B1CE10', '#FF9C1F', '#FF9C1F', '#FF9C1F', '#FD5F5F', '#FD5F5F', '#FD5F5F']
            return colorList[params.dataIndex]
          },

          itemStyle: {
            normal: {
              barBorderRadius: [0, 6, 6, 0], //圆角半径（顺时针左上，右上，右下，左下）
              label: {
                show: true, //开启显示
                position: 'right', //在上方显示
                formatter: '{c}%', //显示为百分比
                textStyle: { //数值样式
                  color: '#fff',
                  fontSize: 14
                }
              },
              //颜色渐变
              //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              color: function (params) {
                var colorList = [
                  ['#292E3E', '#B1CE10'],
                  ['#292E3E', '#B1CE10'],
                  ['#292E3E', '#B1CE10'],
                  ['#27323A', '#FF9C1F'],
                  ['#27323A', '#FF9C1F'],
                  ['#27323A', '#FF9C1F'],
                  ['#233539', '#FD5F5F'],
                  ['#233539', '#FD5F5F'],
                  ['#233539', '#FD5F5F']
                ]
                var index = params.dataIndex;
                if (params.dataIndex >= colorList.length) {
                  index = params.dataIndex - colorList.length;
                }
                return new echarts.graphic.LinearGradient(0, 0, 1, 0,
                  [{
                    offset: 0,
                    color: colorList[index][0]
                  },
                    {
                      offset: 1,
                      color: colorList[index][1]
                    }
                  ]);
              }
            }
          }
        }],
      },
      getOptionLineFlter: {
        grid: {
          left: '3%',
          right: '3%',
          top: '10%',
          bottom: '5%',
          containLabel: true
        },
        legend: {
          icon: 'circle',
          top: '3%',
          itemWidth: 6,
          itemGap: 20,
          textStyle: {
            color: '#D5E6FF'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        //X轴
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
          //x轴坐标颜色
          axisLine: {
            lineStyle: {
              color: '#314A70',
              padding: 10,
              type: 'solid',
            }
          },
          //刻度上字体样式
          axisLabel: {
            show: true,
            interval: 0,  //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
            //rotate:38,  //调整数值改变倾斜的幅度（范围-90到90）
            textStyle: {
              color: '#fff'
            }
          },
          //刻度样式
          axisTick: {
            alignWithLabel: true,
            length: 5,
            color: '#314A70',
            lineStyle: {
              color: '#314A70'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: { // 分隔线
            show: false, // 默认显示，属性show控制显示与否
            lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
              color: ['#314A70'],
              width: 1,
              type: 'dashed'
            },
          },
          max: function (value) {
            return value.max + Math.round(value.max/3);
          },
          scale: false,
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#314A70'
            }
          },
          axisLabel: {
            show: true,
            margin: 8, //刻度标签与轴线之间的距离
            verticalAlign: 'middle',
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: true //坐标轴刻度
          }
        },
        series: [{
          name: '控制器',
          data: [120, 200, 600, 900, 709, 830, 1120],
          type: 'line',
          smooth: true, //是否平滑
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 10, //标记的大小
          lineStyle: {
            normal: {
              color: "#FF9C1F",
            },
          },
          label: { //标记的的数值样式
            show: true,
            position: 'top',
            textStyle: {
              color: '#FF9C1F',
            }
          },
          itemStyle: { //标记的样式
            color: "#FF9C1F",
            borderColor: "rgba(255, 156, 31, .22)",
            borderWidth: 10,
          },
          tooltip: {
            show: true
          },
        },{
          name: '炉具',
          data: [350, 780, 500, 600, 909, 540, 320],
          type: 'line',
          smooth: true, //是否平滑
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 10, //标记的大小
          lineStyle: {
            normal: {
              color: "#B1CE10",
            },
          },
          label: { //标记的的数值样式
            show: true,
            position: 'top',
            textStyle: {
              color: '#B1CE10',
            }
          },
          itemStyle: { //标记的样式
            color: "#B1CE10",
            borderColor: "rgba(177, 206, 16, .22)",
            borderWidth: 10,
          },
          tooltip: {
            show: true
          },
        }],
      },
    }
  },
  computed: {

  },
  created: function() {
    var that = this;
    //var allW = document.body.clientWidth * 30%;
    //实时通信
  //  this.initWebSocket();
  },
  mounted() {
    this.initWebSocket(); //建立实时通信
    this.changeAllData(); //创建所有canvas
    //this.newbcak(); //背景描绘
    this.allStarShow(); //全星
    //this.allStarTwo();//宇宙
    //this.threadPoxi(); //

    //把window.onresize事件挂在到mounted函数上
    /*const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }*/
    var that=this;
    window.addEventListener('resize', function () {
      if (that.resizeTimer) clearTimeout(that.resizeTimer);
        that.resizeTimer = setTimeout(function () {
        that.chartChinaFun.resize();
        that.chartPieFun.resize();
        that.chartBarDistribution.resize();
        that.chartLineFlter.resize();
      }, 100)
    })
  },
  watch: {
    //在watch中监听实时高度
    /*screenWidth (val) {
      if (!this.timer) {
        this.screenWidth = val
        this.timer = true
        let that = this
        var times = setTimeout(function () {
          console.log(that.screenWidth)
          that.changeAllData();
          that.timer = false;
        }, 400)
      }
    }*/
  },
  methods: {
    //调用
    changeAllData() {
      this.chartChinaFun = echarts.init(document.getElementById('myChartFour'));
      this.chartChinaFun.setOption(this.getOptionChina); //初次中国地图渲染页面

      this.chartPieFun = echarts.init(document.getElementById('myChartOne'));
      this.chartPieFun.setOption(this.getOptionPie); // 饼图联网占比图

      this.chartBarDistribution = echarts.init(document.getElementById('myChartTwo'));
      this.chartBarDistribution.setOption(this.getOptionBarDistribution); // 地域排行 炉具排名

      this.chartLineFlter = echarts.init(document.getElementById('myChartThree'));
      this.chartLineFlter.setOption(this.getOptionLineFlter); // 装机趋势图
    },
    //发送数据包
    threadPoxi() { //sendData
      const agentData =3;// this.$route.query.token; //参数
        console.log(this.websock.readyState,"this.websock.readyState",this.websock.OPEN,this.websock.CONNECTING)
      //若是ws开启状态
      if (this.websock.readyState === this.websock.OPEN) {
        this.websocketsend(agentData); //console.log('我复活了 开启');
      }
      // 若是 正在开启状态，则等待300毫秒
      else if (this.websock.readyState === this.websock.CONNECTING) {
        let that = this; // console.log('我复活了 开启')
        setTimeout(function() {
          that.websocketsend(agentData)
        }, 300);
      } else { // 若未开启 ，则等待500毫秒 console.log('挂了重连')
         this.initWebSocket();
        let that = this; //保存当前对象this
        setTimeout(function() {
          that.websocketsend(agentData)
        }, 500);
      }
    },
    initWebSocket() { //初始化weosocket
      const wsuri = "ws://139.9.153.80:8483"; //"ws://139.9.153.80:8483 正式";//ws://114.116.67.89:8483 测试
      this.websock = new WebSocket(wsuri);
      this.websock.onopen = this.onopensss;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onclose = this.websocketclose;
    },
      onopensss(){
          this.threadPoxi(); //
      },
    websocketonmessage(e) { //数据接收
      console.log('打印e',e);
      var that = this;
      var redata = JSON.parse(e.data);
      console.log('打印的结果', redata);
      // var dataObj = eval("(" + redata + ")");
      var command = redata.command;
      var data = redata.data;
      console.log('报错??',command);
      switch (command) {
        case 'A0':
          break;
        case 'A10':
           console.info(data);
            that.newmessage(data.title, data.content, 1);
          // switch (data.type) {
          //   case 1:
          //     console.info('新订单');
          //     that.newmessage('新订单', '设备' + data.orderData.equipment_number + '有人打水了', 1);
          //     break;
          //   case 2:
          //     console.info('新充值');
          //     that.newmessage('新充值', data.recData.card_number + '新充值:' + data.recData.pay_money + '元', 2);
          //     break;
          //   case 3:
          //     if (!data.deviceSN) {
          //       return;
          //     }
          //     that.newmessage('设备上线', data.deviceSN + '设备上线', 3);
          //     break;
          //   case 4:
          //     if (!data.deviceSN) {
          //       return;
          //     }
          //     that.newmessage('设备离线', data.deviceSN + '设备离线', 4);
          //     break;
          // }
          break;
        case 'A1':
          var chartOneFunData = [
            { value: data.on_line, name: '在线' },
            { value: data.off_line, name: '离线' },
          ];
          that.chartPieFun.setOption({
            series: [{ data: chartOneFunData }],
          });
          that.controllerData = data;
          break;
        case 'A2':
          var getOptionLineTimeData = data.area;
          var getOptionLineTimeSeriesData = data.proportion;
          that.chartBarDistribution.setOption({
            yAxis: [{ data: getOptionLineTimeData }],
            series: [{ data: getOptionLineTimeSeriesData }],
          });
          break;
        case 'A3':
          var getOptionLineSeriesDataA = data.A3_A;
          var getOptionLineSeriesDataB = data.A3_B;
          console.log('这是??',getOptionLineSeriesDataA,getOptionLineSeriesDataB);
          // that.chartChinaFun.setOption({
          //   series: [{ data: getOptionLineSeriesData1 }],
          // });
          // getOptionLineSeriesDataB.push({"value": [103.9526, 30.7617],"itemStyle":{"color":"#c1bb1f"}});
           this.getOptionChina.series[1].data = getOptionLineSeriesDataB;
           this.getOptionChina.series[2].data = getOptionLineSeriesDataA;
          this.chartChinaFun.setOption(this.getOptionChina); //初次中国地图渲染页面
          break;
        case 'A4':
          that.totalData = data;
          break;
        case 'A5':
          var getOptionLineTimeData = data.trend_time;
          var getOptionLineTimeSeriesData1 = data.trend_equipment_count;
          var getOptionLineTimeSeriesData2 = data.trend_stove_core_count;
          that.chartLineFlter.setOption({
            xAxis: [{ data: getOptionLineTimeData }],
            series: [{ data: getOptionLineTimeSeriesData1 },{ data: getOptionLineTimeSeriesData2 }],
          });
          break;
      }


    },
    numberGrow(ele, cka, add) {
      var that = this;
      // console.log('xuyaode数据>>>',ele,cka,add);
      var current = Number(add);
      var start = Number(cka);
      var step = ((add - cka) * 10) / (3 * 1000);
      var t = setInterval(function() {
        start = Number((Number(step) + Number(start)).toFixed(3));
        if (start > add) {
          clearInterval(t)
          start = add
          t = null
        }
        if (current === start) {
          return
        }
        current = start
        //ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,');
        that.waterconsumption = current;
      }, 10)
    },
    newmessage(title, message, num) {
      var that = this;
      var icons = '',
        classs = '';
      if (num == 1) {
        icons = 'el-icon-date';
        classs = 'mains';
      } else if (num == 2) {
        icons = 'el-icon-tickets';
        classs = 'parsA';
      } else if (num == 3) {
        icons = 'el-icon-upload';
        classs = 'parsB';
      } else if (num == 4) {
        icons = 'el-icon-printer';
        classs = 'parsC';
      }
      that.$notify({
        title: title,
        message: message,
        customClass: classs,
        duration: 5000,
        showClose: false,
        offset: 30
      });
      //音频播放优化处理
      let audio = document.getElementById("audio");
      audio.src = that.audio_url;
      var playPromise = audio.play();
      playPromise.then(() => {
        setTimeout(() => {}, (audio.duration?audio.duration:1.2) * 1000); // audio.duration 为音频的时长单位为秒
      }).catch((e) => {
        console.log('加载失败')
      });
    },
    websocketsend(agentData) { //数据发送
      clearInterval(interval); //先清一次心跳
      var sendData = {},
        that = this;
      var datas = { token: agentData };
      sendData.command = "A0";
      sendData.data = datas;
      sendData = JSON.stringify(sendData);
      // console.log('one', sendData);
      this.websock.send(sendData); //第一次景来先执行一次
      var interval = setInterval(function() { //此处循环
        //console.log('上传的数据', sendData);
        that.websock.send(sendData);
      }, 30000);
    },
    websocketclose(e) { //关闭监听
      this.threadPoxi(); //重连  // console.log("哦豁 我挂掉了");
    },

    //绘制背景
    newbcak() {
      var o = document.getElementsByTagName("body")[0];
      var num = 200;
      var w = window.innerWidth;
      var h = o.offsetHeight;
      var max = 100;
      var _x = 0;
      var _y = 0;
      var _z = 150;
      var dtr = function(d) {
        return d * Math.PI / 180;
      };

      var rnd = function() {
        return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
      };
      var dist = function(p1, p2, p3) {
        return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2));
      };

      var cam = {
        obj: {
          x: _x,
          y: _y,
          z: _z
        },
        dest: {
          x: 0,
          y: 0,
          z: 1
        },
        dist: {
          x: 0,
          y: 0,
          z: 200
        },
        ang: {
          cplane: 0,
          splane: 0,
          ctheta: 0,
          stheta: 0
        },
        zoom: 1,
        disp: {
          x: w / 2,
          y: h / 2,
          z: 0
        },
        upd: function() {
          cam.dist.x = cam.dest.x - cam.obj.x;
          cam.dist.y = cam.dest.y - cam.obj.y;
          cam.dist.z = cam.dest.z - cam.obj.z;
          cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
          cam.ang.splane = cam.dist.x / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
          cam.ang.ctheta = Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
          cam.ang.stheta = -cam.dist.y / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
        }
      };

      var trans = {
        parts: {
          sz: function(p, sz) {
            return {
              x: p.x * sz.x,
              y: p.y * sz.y,
              z: p.z * sz.z
            };
          },
          rot: {
            x: function(p, rot) {
              return {
                x: p.x,
                y: p.y * Math.cos(dtr(rot.x)) - p.z * Math.sin(dtr(rot.x)),
                z: p.y * Math.sin(dtr(rot.x)) + p.z * Math.cos(dtr(rot.x))
              };
            },
            y: function(p, rot) {
              return {
                x: p.x * Math.cos(dtr(rot.y)) + p.z * Math.sin(dtr(rot.y)),
                y: p.y,
                z: -p.x * Math.sin(dtr(rot.y)) + p.z * Math.cos(dtr(rot.y))
              };
            },
            z: function(p, rot) {
              return {
                x: p.x * Math.cos(dtr(rot.z)) - p.y * Math.sin(dtr(rot.z)),
                y: p.x * Math.sin(dtr(rot.z)) + p.y * Math.cos(dtr(rot.z)),
                z: p.z
              };
            }
          },
          pos: function(p, pos) {
            return {
              x: p.x + pos.x,
              y: p.y + pos.y,
              z: p.z + pos.z
            };
          }
        },
        pov: {
          plane: function(p) {
            return {
              x: p.x * cam.ang.cplane + p.z * cam.ang.splane,
              y: p.y,
              z: p.x * -cam.ang.splane + p.z * cam.ang.cplane
            };
          },
          theta: function(p) {
            return {
              x: p.x,
              y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta,
              z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta
            };
          },
          set: function(p) {
            return {
              x: p.x - cam.obj.x,
              y: p.y - cam.obj.y,
              z: p.z - cam.obj.z
            };
          }
        },
        persp: function(p) {
          return {
            x: p.x * cam.dist.z / p.z * cam.zoom,
            y: p.y * cam.dist.z / p.z * cam.zoom,
            z: p.z * cam.zoom,
            p: cam.dist.z / p.z
          };
        },
        disp: function(p, disp) {
          return {
            x: p.x + disp.x,
            y: -p.y + disp.y,
            z: p.z + disp.z,
            p: p.p
          };
        },
        steps: function(_obj_, sz, rot, pos, disp) {
          var _args = trans.parts.sz(_obj_, sz);
          _args = trans.parts.rot.x(_args, rot);
          _args = trans.parts.rot.y(_args, rot);
          _args = trans.parts.rot.z(_args, rot);
          _args = trans.parts.pos(_args, pos);
          _args = trans.pov.plane(_args);
          _args = trans.pov.theta(_args);
          _args = trans.pov.set(_args);
          _args = trans.persp(_args);
          _args = trans.disp(_args, disp);
          return _args;
        }
      };

      (function() {
        "use strict";
        var threeD = function(param) {
          this.transIn = {};
          this.transOut = {};
          this.transIn.vtx = (param.vtx);
          this.transIn.sz = (param.sz);
          this.transIn.rot = (param.rot);
          this.transIn.pos = (param.pos);
        };

        threeD.prototype.vupd = function() {
          this.transOut = trans.steps(

            this.transIn.vtx,
            this.transIn.sz,
            this.transIn.rot,
            this.transIn.pos,
            cam.disp
          );
        };

        var Build = function() {
          this.vel = 0.04;
          this.lim = 360;
          this.diff = 200;
          this.initPos = 100;
          this.toX = _x;
          this.toY = _y;
          this.go();
        };

        Build.prototype.go = function() {
          this.canvas = document.getElementById("canvas");
          this.canvas.width = window.innerWidth;
          this.canvas.height = o.offsetHeight;
          this.$ = canvas.getContext("2d");
          this.$.globalCompositeOperation = 'source-over';
          this.varr = [];
          this.dist = [];
          this.calc = [];

          for (var i = 0, len = num; i < len; i++) {
            this.add();
          }

          this.rotObj = {
            x: 0,
            y: 0,
            z: 0
          };
          this.objSz = {
            x: w / 5,
            y: h / 5,
            z: w / 5
          };
        };

        Build.prototype.add = function() {
          this.varr.push(new threeD({
            vtx: {
              x: rnd(),
              y: rnd(),
              z: rnd()
            },
            sz: {
              x: 0,
              y: 0,
              z: 0
            },
            rot: {
              x: 20,
              y: -20,
              z: 0
            },
            pos: {
              x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
              y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
              z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180)
            }
          }));
          this.calc.push({
            x: 360 * Math.random(),
            y: 360 * Math.random(),
            z: 360 * Math.random()
          });
        };

        Build.prototype.upd = function() {
          cam.obj.x += (this.toX - cam.obj.x) * 0.05;
          cam.obj.y += (this.toY - cam.obj.y) * 0.05;
        };

        Build.prototype.draw = function() {
          this.$.clearRect(0, 0, this.canvas.width, this.canvas.height);
          cam.upd();
          this.rotObj.x += 0.1;
          this.rotObj.y += 0.1;
          this.rotObj.z += 0.1;

          for (var i = 0; i < this.varr.length; i++) {
            for (var val in this.calc[i]) {
              if (this.calc[i].hasOwnProperty(val)) {
                this.calc[i][val] += this.vel;
                if (this.calc[i][val] > this.lim) this.calc[i][val] = 0;
              }
            }

            this.varr[i].transIn.pos = {
              x: this.diff * Math.cos(this.calc[i].x * Math.PI / 180),
              y: this.diff * Math.sin(this.calc[i].y * Math.PI / 180),
              z: this.diff * Math.sin(this.calc[i].z * Math.PI / 180)
            };
            this.varr[i].transIn.rot = this.rotObj;
            this.varr[i].transIn.sz = this.objSz;
            this.varr[i].vupd();
            if (this.varr[i].transOut.p < 0) continue;
            var g = this.$.createRadialGradient(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p, this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2);
            this.$.globalCompositeOperation = 'lighter';
            g.addColorStop(0, 'hsla(255, 255%, 255%, 1)');
            g.addColorStop(.5, 'hsla(' + (i + 2) + ',85%, 40%,1)');
            g.addColorStop(1, 'hsla(' + (i) + ',85%, 40%,.5)');
            this.$.fillStyle = g;
            this.$.beginPath();
            this.$.arc(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2, 0, Math.PI * 2, false);
            this.$.fill();
            this.$.closePath();
          }
        };
        Build.prototype.anim = function() {
          window.requestAnimationFrame = (function() {
            return window.requestAnimationFrame ||
              function(callback, element) {
                window.setTimeout(callback, 1000 / 60);
              };
          })();
          var anim = function() {
            this.upd();
            this.draw();
            window.requestAnimationFrame(anim);
          }.bind(this);
          window.requestAnimationFrame(anim);
        };

        Build.prototype.run = function() {
          this.anim();

          window.addEventListener('mousemove', function(e) {
            this.toX = (e.clientX - this.canvas.width / 2) * -0.8;
            this.toY = (e.clientY - this.canvas.height / 2) * 0.8;
          }.bind(this));
          window.addEventListener('touchmove', function(e) {
            e.preventDefault();
            this.toX = (e.touches[0].clientX - this.canvas.width / 2) * -0.8;
            this.toY = (e.touches[0].clientY - this.canvas.height / 2) * 0.8;
          }.bind(this));
          window.addEventListener('mousedown', function(e) {
            for (var i = 0; i < 100; i++) {
              this.add();
            }
          }.bind(this));
          window.addEventListener('touchstart', function(e) {
            e.preventDefault();
            for (var i = 0; i < 100; i++) {
              this.add();
            }
          }.bind(this));
        };
        var app = new Build();
        app.run();
      })();
      window.addEventListener('resize', function() {
        canvas.width = w = window.innerWidth;
        canvas.height = h = window.innerHeight;
      }, false);
    },
    allStarShow() {
      var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        w = canvas.width = window.innerWidth,
        h = canvas.height = window.innerHeight,

        hue = 217,
        stars = [],
        count = 0,
        maxStars = 1200;
      var canvas2 = document.createElement('canvas'),
        ctx2 = canvas2.getContext('2d');
      canvas2.width = 100;
      canvas2.height = 100;
      var half = canvas2.width / 2,
        gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
      gradient2.addColorStop(0.015, '#fff');
      gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
      gradient2.addColorStop(0.20, 'hsl(' + hue + ', 64%, 6%)');
      gradient2.addColorStop(1, 'transparent');
      ctx2.fillStyle = gradient2;
      ctx2.beginPath();
      ctx2.arc(half, half, half, 0, Math.PI * 2);
      ctx2.fill();
      // End cache
      function random(min, max) {
        if (arguments.length < 2) {
          max = min;
          min = 0;
        }

        if (min > max) {
          var hold = max;
          max = min;
          min = hold;
        }

        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      function maxOrbit(x, y) {
        var max = Math.max(x, y),
          diameter = Math.round(Math.sqrt(max * max + max * max));
        return diameter / 2;
      }
      var Star = function() {
        this.orbitRadius = random(maxOrbit(w, h));
        this.radius = random(60, this.orbitRadius) / 12;
        this.orbitX = w / 2;
        this.orbitY = h / 2;
        this.timePassed = random(0, maxStars);
        this.speed = random(this.orbitRadius) / 900000;
        this.alpha = random(2, 10) / 10;
        count++;
        stars[count] = this;
      }

      Star.prototype.draw = function() {
        var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
          y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
          twinkle = random(10);

        if (twinkle === 1 && this.alpha > 0) {
          this.alpha -= 0.05;
        } else if (twinkle === 2 && this.alpha < 1) {
          this.alpha += 0.05;
        }

        ctx.globalAlpha = this.alpha;
        ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
        this.timePassed += this.speed;
      }
      for (var i = 0; i < maxStars; i++) {
        new Star();
      }

      function animation() {
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 0.9;
        //星空背景颜色
        // ctx.fillStyle = 'hsla(' + hue + ', 50%, 6%, 1)';
        // ctx.fillStyle = 'hsla(217, 55%, 10%, 1)';
        var grd=ctx.createRadialGradient(w/2, h/2.5, w/2.5, w/1.8, h/1.8, h/3);
        grd.addColorStop(0,"#111111");
        grd.addColorStop(1,"#172e46");
        ctx.fillStyle=grd;
        ctx.fillRect(0, 0, w, h)

        ctx.globalCompositeOperation = 'lighter';
        for (var i = 1, l = stars.length; i < l; i++) {
          stars[i].draw();
        };

        window.requestAnimationFrame(animation);
      }
      animation();
    },
    allStarTwo() {
      var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        w = canvas.width = window.innerWidth,
        h = canvas.height = window.innerHeight,

        hue = 217,
        stars = [],
        count = 0,
        maxStars = 1400;
      // Thanks @jackrugile for the performance tip! http://codepen.io/jackrugile/pen/BjBGoM
      // Cache gradient
      var canvas2 = document.createElement('canvas'),
        ctx2 = canvas2.getContext('2d');
      canvas2.width = 100;
      canvas2.height = 100;
      var half = canvas2.width / 2,
        gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
      gradient2.addColorStop(0.025, '#fff');
      gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
      gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
      gradient2.addColorStop(1, 'transparent');

      ctx2.fillStyle = gradient2;
      ctx2.beginPath();
      ctx2.arc(half, half, half, 0, Math.PI * 2);
      ctx2.fill();

      // End cache

      function random(min, max) {
        if (arguments.length < 2) {
          max = min;
          min = 0;
        }

        if (min > max) {
          var hold = max;
          max = min;
          min = hold;
        }

        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      var Star = function() {

        this.orbitRadius = random(w / 2 - 50);
        this.radius = random(100, this.orbitRadius) / 10;
        this.orbitX = w / 2;
        this.orbitY = h / 2;
        this.timePassed = random(0, maxStars);
        this.speed = random(this.orbitRadius) / 900000;
        this.alpha = random(2, 10) / 10;

        count++;
        stars[count] = this;
      }

      Star.prototype.draw = function() {
        var x = Math.sin(this.timePassed + 1) * this.orbitRadius + this.orbitX,
          y = Math.cos(this.timePassed) * this.orbitRadius / 2 + this.orbitY,
          twinkle = random(10);

        if (twinkle === 1 && this.alpha > 0) {
          this.alpha -= 0.05;
        } else if (twinkle === 2 && this.alpha < 1) {
          this.alpha += 0.05;
        }

        ctx.globalAlpha = this.alpha;
        ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
        this.timePassed += this.speed;
      }

      for (var i = 0; i < maxStars; i++) {
        new Star();
      }

      function animation() {
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 0.8;
        ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
        ctx.fillRect(0, 0, w, h)

        ctx.globalCompositeOperation = 'lighter';
        for (var i = 1, l = stars.length; i < l; i++) {
          stars[i].draw();
        };

        window.requestAnimationFrame(animation);
      }

      animation();
    }

  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.el-notification .el-icon-success {
  /*修改弹窗样式*/
  color: #2881FC;
  /*  opacity: 1!important;*/
}

.mains {
  color: #2881FC;
}

.parsA {
  color: #6FFA4B;
}

.parsB {
  color: #1FF7EA;
}

.parsC {
  color: #D592F0;
}

.el-notification.left {
  left: 23%;
  /* opacity: 1!important;*/
}

.el-notification__title {
  color: #fff;
  font-size: 14px;
}

.el-notification {
  background: rgba(255, 255, 255, 0.3);
  padding: 10px 26px 10px 9px;
  width: 12%;
  transition: opacity .5s, transform .5s, left .5s, right .5s, top .5s, bottom .5s, -webkit-transform .5s;
  border: 1px solid #4D4D4D;
  margin-top: 3rem;
}

.el-notification__content {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #cfcfd2;
}

.el-notification__closeBtn {
  /* 关闭按钮*/
  top: 10px;
  right: 9px;
  color: #fff;
}

.el-notification__closeBtn:hover {
  /*结束*/
  color: #2881FC;
}

#canvas {
  background-image: -webkit-radial-gradient(ellipse farthest-corner at center top, #111111 0%, #172E50 100%);
  background-image: radial-gradient(ellipse farthest-corner at center top, #111111 0%, #172E50 100%);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#home {
  width: 100%;
  height: 100vh;
  cursor: pointer;
  font-size: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 10;
}

#home .leftBox {
  /*左边*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 0 0% 3% 1.5%;
  box-sizing: border-box;
  width: 30%;
  height: 98%;
}

.leftSame {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 45%;
}

#home .rightBox {
  /*右边*/
  display: flex;
  align-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  padding: 1% 1.5% 4% 0%;
  box-sizing: border-box;
  width: 25%;
  height: 98%;
  position: absolute;
  right: 0;
  top: 0;
}

.rightSameOne {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 40%;
}

.centerBox {
  /*中间盒子*/
  width: 60%;
  height: 98%;
  padding: 1% 0%;
  margin-left: -3%;
}

.topBor {
  width: 25%;
}

.cenShow {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cenShow p {
  width: 100%;
  line-height: 2.8rem;
  text-align: center;
  margin: 0 0 1.2rem 0;
  box-sizing: border-box;
  font-size: 2.5rem;
  font-weight: 500;
  background: linear-gradient(0deg, #FF8A00 0%, #FFDAC2 50%, #FF9000 100%);
 -webkit-background-clip: text;
  color: transparent;
  letter-spacing: .2rem;
  position: relative;
  z-index: 3;
}

.atlas {
  /*地图标点*/
  width: 100%;
  height: 90%;
  position: relative;
}

.oneBox p {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 30px;
}

  .headerTitle{
    width: 100%;
    height: 10%;
  }
  .contentMain{
    width: 100%;
    height: 90%;
    display: flex;
  }
  .leftImg{
    width: 45%;
    width: 45%;
    position: absolute;
    bottom: 1rem;
    left: 0;
    z-index: 1;
  }
  .rightImg{
    width: 45%;
    width: 45%;
    position: absolute;
    bottom: 1rem;
    right: 0;
    z-index: 1;
  }
  .chartBg{
    width: 100%;
    height: 100%;
    padding: 12% 7% 5%;
    box-sizing: border-box;
    background-image: url("../../assets/modul_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .chartName{
    color: #fff;
    font-size: .8rem;
    padding-left: .8rem;
    margin-top: -.8rem;
    margin-bottom: .5rem;
  }
  .leftSame .topTitle, .rightSameOne .topTitle {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 9%;
    color: #fff;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .topTitle .block1{
    width: 3px;
    height: 10px;
    background: #B1CE10;
    opacity: 0.2;
    border-radius: 2px;
  }
  .topTitle .block2{
    width: 3px;
    height: 14px;
    background: #B1CE10;
    opacity: 0.3;
    border-radius: 2px;
    margin: 0 .1rem;
  }
  .topTitle .block3{
    width: 3px;
    height: 18px;
    background: #B1CE10;
    opacity: 0.4;
    border-radius: 2px;
  }
  .topTitle .title{
    margin: 0 .8rem;
  }

  .flex_around{
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .flex_block{
    display: flex;
    align-items: center;
  }
  .flex_block .blockImg2{
    width: .9rem;
    height: auto;
    margin-right: .5rem;
  }
  .blockColumn{
    display: flex;
    flex-direction: column;
  }
  .flex_block .blockDesc{
    font-size: .8rem;
  }
  .flex_block .blockValue{
    font-size: 1.2rem;
    color: #fff;
  }
  .totalBlock{
    position: absolute;
    top: 5.5rem;
    right: 5rem;
    z-index: 3;
  }
  .totalBlock .blockImg1{
    width: 1.5rem;
    height: auto;
    margin-right: .5rem;
  }
  .totalBlock .blockDesc{
    font-size: .9rem;
  }
  .totalBlock .blockValue{
    font-size: 2rem;
    color: #fff;
  }

  .todayTotal{
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 2.5rem;
    left: 0;
    z-index: 3;
  }
  .todayTotal .totalDesc{
    color: #fff;
    font-size: 1rem;
    margin-bottom: .3rem;
  }
  .todayTotal .todayPercentage{
    font-size: 1.2rem;
  }
  .todayTotal .todayNum{
    font-size: 2.5rem;
    margin-right: 1rem;
  }
  .todayTotal .updown{
    color: #fff;
    font-size: .9rem;
  }
  .todayTotal .updown img{
    width: .6rem;
    height: auto;
    margin-left: .3rem;
  }
  .myChart{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mt_1{
    margin-bottom: 1rem;
  }
  .mr_3{
    margin-right: 3rem;
  }
  .col_1EE9B6{
    color: #1EE9B6;
  }
  .col_FD5F5F{
    color: #FD5F5F;
  }
  .col_B1CE10{
    color: #B1CE10;
  }
  .col_FF9C1F{
    color: #FF9C1F;
  }
  .col_57BBC9{
    color: #57BBC9;
  }
</style>
